<template>
  <div id="app">
    <div class="config-select">
      <label>类型：<select @change="changeType">
        <option value="SLIDER">滑块</option>
        <option value="ROTATE">旋转</option>
        <option value="CONCAT">拼接</option>
        <option value="WORD_IMAGE_CLICK">文字选点</option>
      </select>
      </label>
      <label>语言：<select @change="changeLang">
        <option value="zh_cn">简体中文</option>
        <option value="zh_tw">繁体中文</option>
        <option value="en">English</option>
        <option value="ja">日語</option>
        <option value="ko">한국어</option>

      </select>
      </label>
      <label>主题：<select @change="changeTheme">
        <option value="light">light</option>
        <option value="dark">dark</option>
      </select>
      </label>

    </div>
    <kite-config-provider :locale="locale" :theme="theme">
      <kite-captcha ref="captchaRef" v-model="matchingResultCode"
                    :render-data-api="renderDataApi"
                    :scale="1"
                    :show-close="true"
                    background-image="https://picsum.photos/1920/1080"
                    @matching-data="handleMatchingData"
                    @render-success="handleRenderSuccess">
      </kite-captcha>
    </kite-config-provider>

  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import axios from 'axios'
import {CaptchaInstance, CaptchaMatchingData} from "./index";

// 响应式数据
const genUrl = 'http://localhost:8088/captcha/behavior/gen'
const checkUrl = 'http://localhost:8088/captcha/behavior/check'
const captchaRef = ref<CaptchaInstance>()
const type = ref('SLIDER')
const matchingResultCode = ref(null)
const locale = ref('zh_cn')
const theme = ref('light')
const mockData = async () => {
  try {
    const module = await import(`./mock/${type.value.toLowerCase()}_render_data.json`)
    console.log('module', module)
    return module.default.captcha
  } catch (error) {
    console.error('Failed to load mock data:', error)
    // 返回默认数据或空对象
    return {}
  }
}
const renderDataApi = async () => {
  // mock
  //return mockData()
  // 请求服务接口
  const res = await axios.get(`${genUrl}?type=${type.value}`)
  return res.data.captcha
}
const handleMatchingData = async (data: CaptchaMatchingData) => {
  console.log('matching-data', data)
  const res = await axios.post(`${checkUrl}`, data)
  matchingResultCode.value = res.data.code
}

const handleRenderSuccess = (val: boolean) => {
  console.log('render-success', val)
}
const changeLang = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  locale.value = target.value
}
const changeTheme = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  theme.value = target.value
}
const changeType = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  type.value = target.value
  captchaRef.value?.refresh()
}
</script>

<style>
#app {
  text-align: center;
  width: 50%;
  margin: 0 auto;
  font-size: 12px;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.config-select {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

select {
  margin-right: 10px;
}
</style>
